<template>
  <li class="item">
    <span class="id">{{ id }}</span>
    <span class="title">{{ title }}</span>
    <span class="check"><input @change="change(id,$event.target.checked)" type="checkbox" name="checked" id="checked"> 完成</span>
    <button @click="removeItem(id)">删除</button>
  </li>
</template>

<script>
export default {
  name: 'item',
  props: {
    id: String,
    title: String,
    checked: Boolean,
    removeItem: {
      type: Function,
    },
  },
  methods: {
    change(id, status) {
      this.$bus.$emit('checkTodo', {id, status});
    },
  },
};
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item > .id, .title, .check {
  width: 100px;
}
</style>